<template>
  <div class="m-content">
    <div class="m-content-table">
      <Table :columns="columns" :data="typeData" :loading="loading"></Table>
    </div>
    <div class="m-content-page">
      <Page
        :total="typeLen"
        :page-size="pageSize"
        :page-size-opts="[5, 10, 15]"
        :show-sizer="true"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
    <div class="m-content-Button">
      <Button type="primary" @click="addType">新增</Button>
    </div>

    <AddType :showModal="addModal" @closeModal="showAdd = false" @reloadTable="reload"></AddType>

    <EditType :Type="row" :showModal="editModal" @closeModal="showEdit = false" @reloadTable="reload"></EditType>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import AddType from './handleType/addType.vue'
import EditType from './handleType/editType.vue'
import { columns } from './js/columns'

export default {
  inject: ['reload'],
  components: {
    AddType,
    EditType
  },
  data () {
    return {
      typeData: [],  // 商品类别数据
      typeLen: 0,   // 总数据长度
      loading: false,   // 表格是否在加载中
      pageId: 1,  // 传递给Modal的pageId
      pageSize: 5,   // 页面长度
      columns: columns(this),
      showAdd: false,   // 新增商品类别
      showEdit: false,   // 修改商品类别
      row: {}   // 选中的商品类别数据
    }
  },
  computed: {
    addModal () {
      return this.showAdd
    },
    editModal () {
      return this.showEdit
    }
  },
  mounted () {
    this._getType()
  },
  methods: {
    // 编辑商品类别
    editType (row) {
      this.row = row
      this.showEdit = true
    },
    // 删除商品类别
    deleteType (id) {
      this._deleteType(id)
      this.reload()
    },
    // 新增商品类别
    addType () {
      this.showAdd = true
    },
    // 切换页面
    changePage (page) {
      this._getType(page, this.pageSize)
    },
    // 修改每页页数
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this._getType(1, pageSize)
    },
    // 获取商品类别数据
    async _getType (pageId, pageSize) {
      this.loading = true
      const url = 'gettypedata'
      let page = pageId || 1
      let PageSize = pageSize || 5
      const res = await this.GET_DATA({
        dataUrl: url,
        pageId: page,
        pageSize: PageSize
      })
      if (res) {
        this.$nextTick(() => {
          this.typeData = res.data.typeList
          this.typeLen = res.data.pageSize
          this.loading = false
        })
      }
    },
    // 删除商品类别接口
    async _deleteType (id) {
      this.loading = true
      const url = 'goods/deletetype'
      const res = this.GET_DATA({
        dataUrl: url,
        id: id,
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
        this.loading = false
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA'
    })
  }
}
</script>

<style lang="scss">
.m-content-table {
  margin-left: 20px;
  border: 1px solid #dcdee2;
}
.m-content-page {
  position: absolute;
  right: 0;
  margin-top: 10px;
}
.m-content-Button {
  margin-top: 15px;
  margin-left: 20px;
}
</style>